<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base::head(~{ztreeBase::ztree})"></head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
		<span class="layui-breadcrumb">
			<a href="javascript:void(0);">首页</a>
			<a>
				<cite th:text="${title}"></cite>
			</a>
		</span>
</div>

<div class="x-body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm12 layui-col-md3 layui-col-lg2">
                <div class="layui-card">
                    <div class="mini-bar">
                        <fieldset class="layui-elem-field site-demo-button"
                                  style="margin-top: -9px;margin-left: -15px;">
                            <legend style="font-size:14px">组织机构</legend>
                            <div style="height: 665px; width: 100%; overflow: auto">
                                <ul id="tree" class="ztree"></ul>
                            </div>
                        </fieldset>
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md9 layui-col-lg10">
                <div class="layui-card">
                    <div class="layui-form toolbar">
                        <div class="layui-form-item">
                            <form class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <select id="scope" name="scope">
                                            <option value="2" selected="">当前</option>
                                            <option value="1" >全局</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="hidden" id="groupId" name="groupId">
                                        <input type="text" id="name" name="name" placeholder="请输入用户名" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="text" id="fullName" name="fullName" placeholder="请输入姓名"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="createTimeBegin"
                                               placeholder="创建日期(开始)">
                                    </div>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="createTimeEnd"
                                               placeholder="创建日期(结束)">
                                    </div>
                                    <button type="reset" class="layui-btn">重置</button>
                                    <button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <table class="layui-hide" id="table" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script type="text/html" id="toolbarOpt">
    <div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
    <div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>
</script>
<script type="text/html" id="lineOpt">
    <a class="layui-btn layui-btn-xs" lay-event="role">分配角色</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="statusTemp">
    {{# if(d.status == 0){ }}
    <input type="checkbox" checked="" name="status" value="{{ d.id }}" lay-skin="switch" lay-filter="status"
           lay-text="启用|禁用">
    {{# }else{ }}
    <input type="checkbox" name="status" value="{{ d.id }}" lay-skin="switch" lay-filter="status" lay-text="启用|禁用">
    {{# } }}
</script>
<script th:inline="javascript">
    var zTreeObj;
    var form;
    var laydate; //日期
    var table;//表格
    var currPage = 1;
    //zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）$("input[name='status'][value=" + treeNode.status + "]").attr("checked",true);
    var zNodes = [[${zNodes}]];
    //zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
    var setting = {
        view: {
            selectedMulti: false
        },
        data: {
            key: {
                name: 'groupName'
            }
        },
        check: {
            enable: false,
            radioType: "all"
        },
        edit: {
            enable: false
        },
        callback: {
            onClick: zTreeOnClick
        }
    };
    var getParams = function () {
        var data = {
            name: $('#name').val(),
            fullName: $('#fullName').val(),
            createTimeBegin: $('#createTimeBegin').val(),
            createTimeEnd: $('#createTimeEnd').val(),
            groupId: $('#groupId').val(),
            scope: $('#scope').val()
        }
        return data;
    }
    layui.use(['form', 'laydate', 'table'], function () {
        form = layui.form;
        laydate = layui.laydate; //日期
        table = layui.table; //表格

        //加载日期时间选择器
        laydate.render({
            elem: '#createTimeBegin',
            type: 'datetime'
        });
        laydate.render({
            elem: '#createTimeEnd',
            type: 'datetime'
        });

        //初始化组织机构树
        zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
        //展开全部节点
        zTreeObj.expandAll(true);

        //执行一个table实例
        var tableList = table.render({
            elem: '#table',
            url: ctxPath + '/system/user/paging', //数据接口
            where: getParams(),
            title: '系统用户',//定义 table 的大标题（在文件导出等地方会用到）
            page: true,//开启分页
            toolbar: '#toolbarOpt',//开启工具栏
            defaultToolbar: ['filter'],
            limits: [10, 50, 100],//每页条数的选择项，
            even: true,//隔行背景
            text: {
                none: '暂无相关数据' //默认：无数据。
            },
            cols: [[ //表头
                {
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'name',
                    title: '用户名',
                    width: 140,
                    fixed: 'left'
                }, {
                    field: 'fullName',
                    title: '姓名',
                    width: 100
                }, {
                    field: 'roleName',
                    title: '角色',
                    width: 100
                }, {
                    field: 'groupName',
                    title: '部门',
                    width: 100
                }, {
                    field: 'email',
                    title: '邮箱',
                    width: 250,
                    templet: '#titleTpl'
                }, {
                    field: 'phone',
                    title: '手机号',
                    width: 150
                }, {
                    field: 'status',
                    title: '状态',
                    width: 100,
                    templet: '#statusTemp'
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    width: 160
                }, {
                    fixed: 'right',
                    title: '操作',
                    width: 250,
                    align: 'center',
                    toolbar: '#lineOpt'
                }]],
            request: {
                pageName: 'pageNumber', //页码的参数名称，默认：page

                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            done: function (res, curr, count) {
                //获取删除后重载页码
                if (res.data.length == 1) {
                    currPage = curr - 1;
                } else {
                    currPage = curr;
                }
            }
        });
        //监听行数据事件
        table.on('tool(table)', function (obj) {
            //注：tool是工具条事件名，test是table原始容器的属性 lay-filter='对应的值'
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var id = data.id;
            switch (layEvent) {
                case 'detail':
                    admin_medium_window('查看', ctxPath + '/system/user/detail?id=' + id);
                    break;
                case 'del':
                    admin_del_data(id, ctxPath + '/system/user/delete', currPage);
                    break;
                case 'edit':
                    admin_medium_window('编辑', ctxPath + '/system/user/toEdit?id=' + id);
                    break;
                case 'role':
                    admin_small_window('权限配置', ctxPath + '/system/role/toAssign?userId=' + id);
                    break;
            }
        });
        //监听头部工具栏事件
        table.on('toolbar(table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    admin_medium_window('新增', ctxPath + '/system/user/toAdd');
                    break;
                case 'delete':
                    var data = checkStatus.data;
                    var ids = new Array()
                    $.each(data, function (index, item) {
                        ids[index] = item.id;
                    });
                    admin_del_data(ids, ctxPath + '/system/user/delete', currPage);
                    break;
            }
        });
        //监听提交
        form.on('submit(search)', function (data) {
            table.reload('table', {
                page: {curr: currPage},
                where: getParams()
                //设定异步数据接口的额外参数
            });
            return false;
        });
        //监听指定开关
        form.on('switch(status)', function (data) {
            var id = data.value;
            var status;
            if (this.checked) {
                status = 0;
            } else {
                status = 1;
            }
            $.ajax({
                type: 'POST',
                url: ctxPath + '/system/user/updateStatus',
                cache: false, //禁用缓存
                data: {
                    id: id,
                    status: status
                },
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('设置成功', {
                            icon: 1
                        })
                        return;
                    } else {
                        //设置失败，还原开关状态
                        layer.msg('设置失败。错误信息：' + result.msg, {
                            icon: 2
                        });
                        if (status == 0) {
                            $(data.elem).prop('checked', false);
                        } else {
                            $(data.elem).prop('checked', true);
                        }
                        form.render('checkbox');
                        return;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('设置失败', {
                        icon: 2
                    });
                    if (status == 0) {
                        $(data.elem).prop('checked', false);
                    } else {
                        $(data.elem).prop('checked', true);
                    }
                    form.render('checkbox');
                }
            });
        });
    });

    //选中组织机构，筛选用户
    function zTreeOnClick(event, treeId, treeNode) {
        $('#groupId').val(treeNode.id);
        table.reload('table', {
            page: {curr: 1},
            where: getParams()
        });
    }
</script>
</html>